<template>
  <div class="two-footer">
    <ul>
      <router-link
      tag="li"
      :event="$route.path.includes(nav.path) ? '' : 'click'"
      v-for="nav in navs"
      :key="nav.name"
      :to="nav.path"
      >
        <i v-html="nav.meta.iconf"></i>
        <span>{{ nav.meta.title}}</span>
      </router-link>
    </ul>
  </div>
</template>

<script>
import routes from '@/router/routes'
export default {
  data () {
    return {
      navs: []
    }
  },
  created () {
    this.navs = routes.filter(route => route.meta.isTabbar)
  }
}
</script>

<style lang="scss" scoped>
  @font-face {
  font-family: 'iconfont';  /* project id 1960950 */
  src: url('//at.alicdn.com/t/font_1960950_ssykqe1uue.eot');
  src: url('//at.alicdn.com/t/font_1960950_ssykqe1uue.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1960950_ssykqe1uue.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1960950_ssykqe1uue.woff') format('woff'),
  url('//at.alicdn.com/t/font_1960950_ssykqe1uue.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1960950_ssykqe1uue.svg#iconfont') format('svg');
}
  .twoxm-footer {
    ul {
      display: flex;
      justify-content: space-around;
      background-color: orange;
      line-height: 50px;
    }
    li{
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 25px;
    }
    i{
      font-size: 20px;
      font-family: 'iconfont';
    }
  }
  .router-link-exact-active,
  .router-link-active {
    color: red;
  }
</style>
